<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>明德后台管理系统</title>
    <link rel="stylesheet" href="/static/layui-v2.6.8/layui/css/layui.css">
</head>

<body>
    <div class="layui-layout layui-layout-admin">
        <!-- 引入公共页面 -->
        {{include "./common/header.html" }}
        <!-- 引入公共页面 -->
        {{include "./common/side-menu.html" }}
        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;">
                <form class="layui-form" action="" lay-filter="tit">
                    <input type="hidden" name="id">
                    <div class="layui-form-item">
                        <label class="layui-form-label">标题</label>
                        <div class="layui-input-inline">
                            <input type="text" name="article" required lay-verify="required" placeholder="请输入标题"
                                autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">作者</label>
                        <div class="layui-input-inline">
                            <input type="text" name="author" required lay-verify="required" autocomplete="off"
                                class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">封面</label>
                        <div class="layui-upload">
                            <button type="button" class="layui-btn" id="test1">上传图片</button>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">预览</label>
                        <input type="hidden" name="imgPath">
                        <img src="" id="img" width="100px">
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">分类</label>
                        <div class="layui-input-inline">
                            <select name="cat_id">
                                <option value="0"></option>
                                {{each cats item index}}
                                <option value="{{item.cate_id}}">{{item.cate_name}}</option>
                                {{/each}}
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">内容</label>
                        <div class="layui-input-inline">
                            <textarea name="content" placeholder="请输入内容" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">审核</label>
                        <div class="layui-input-block">
                            <input type="radio" name="Audit_status" value="0" title="待审核" checked>
                            <input type="radio" name="Audit_status" value="1" title="审核通过">
                            <input type="radio" name="Audit_status" value="2" title="审核失败">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!-- 引入公共页面 -->
        {{include "./common/footer.html" }}
    </div>
</body>
<script src="/static/js/jquery.js"></script>
<script src="/static/layui-v2.6.8/layui/layui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>
<script>
    window.onload = function () {
        $('#img').attr('src', "{{masterpieces1.img}}")
        layui.use(['upload', 'form'], function () {
            var upload = layui.upload;
            var form = layui.form;
            form.val('tit', {
                "article": "{{masterpieces1.article}}"
                , "author": "{{masterpieces1.author}}"
                , "cat_id": "{{masterpieces1.cat_id}}"
                , "content": "{{masterpieces1.content}}"
                , "Audit_status": "{{masterpieces1.Audit_status}}"
                , "imgPath": "{{masterpieces1.img}}"
                , "id": "{{masterpieces1.id}}"
            })
            //提交按钮监听
            form.on('submit(formDemo)', function (data) {
                let formData = data.field
                $.post('/update', { formData }, function (res) {
                    let { code, message } = res;
                    if (code == 10012) {
                        layer.msg(message)
                        location.href = '/Article'
                    } else {
                        layer.msg(message)
                    }
                })
                //上传图片
                // 重新写一个接口接收
                var uploadInst = upload.render({
                    elem: '#test1' //绑定元素
                    , url: '/upload/' //上传接口
                    , done: function (res) {
                        //上传成功后接受图片新路径
                        // 赋值给预览图片的src属性
                    }
                });
            });
        })
    }
</script>

</html>